<template>
  <div class="rank">
    <div class="rank-header">
      <img class="respon-img" src="~img/rank-header.png">
    </div>
    <div class="rank-my" v-if="userStatus === 3">
      <item-list :data="myRank"></item-list>
    </div>
    <div class="rank-list-wrapper" v-if="allRank">
      <item-list v-for="(item, index) in allRank" :key="index" :data="item"></item-list>
    </div>
    <img src="~img/rank-footer.png" alt="footer" class="rank-footer-img">
  </div>
</template>

<script>
import ItemList from './ItemList'
export default {
  name: 'Rank',
  props: {
    myRank: Object,
    allRank: Array,
    userStatus: Number
  },
  components: {
    ItemList
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .rank
    width 92%
    margin auto
    .rank-header
      width 100%
      height 0
      padding-bottom 38%
      img
        response-img()
    .rank-my
      color #fff
      margin-bottom .18rem
    .rank-list-wrapper
      overflow hidden
      color $grey
      background-image url('~img/rank-bg.png')
      .item-list:nth-child(1)
      .item-list:nth-child(2)
      .item-list:nth-child(3)
        color red
    .rank-footer-img
      response-img()
</style>
